@fontSize:20px;
.edit_wrap{
    width: 375rem/@fontSize;
    height: 100vh;
    height: auto;
    float: left;
    .header{
        width: 375rem/@fontSize;
        height: 45rem/@fontSize;
        line-height:  45rem/@fontSize;
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        color: #666;
        font-size: 16rem/@fontSize;
        background-color: #fff;
        border-bottom: 1px solid #e2e2e2;
        z-index: 99;
        .save{
            color: #831C2A;
            width: auto;
            line-height: 45rem/@fontSize;
            padding: 0 15rem/@fontSize;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 14rem/@fontSize;
            z-index: 100;
        }
    }
    .svg_containers{
        width: 375rem/@fontSize;
        float: left;
        margin-top: 50rem/@fontSize;
        position: relative;
        z-index: 1;
    }

    .footerBar{
        width: 375rem/@fontSize;
        height: 50rem/@fontSize;
        line-height: 50rem/@fontSize;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
        background-color:rgba(255,255,255,.96);
        box-shadow:  0 1px 6px 0 rgba(0,0,0,0.15);
        transform: translateY(50rem/@fontSize);
        transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
        &.show{
            transform: translateY(0);
        }
        .footerSection{
            width: 50%;
            height: 50rem/@fontSize;
            float: left;
            text-align: center;
            font-size: 10rem/@fontSize;
            overflow: hidden;
            line-height: 35rem/@fontSize;
            padding-top: 20rem/@fontSize;
            box-sizing: border-box;
            color: #666;
            background-repeat: no-repeat;
            background-size: 21rem/@fontSize auto;
            background-position: center 5rem/@fontSize;
            &.album{ 
                background-image: url("../img/icon_album@3x.png");
            }
            &.material{
                background-image: url("../img/icon_sticker@3x.png");
            }
        }
    }
    .material_wrap{
        width: 375rem/@fontSize;
        height: 200rem/@fontSize;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        background-color: #fff;
        box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
        transform: translateY(200rem/@fontSize);
        transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
        &.show{
            transform: translateY(0);
        }
        .mate_header{
            width: 375rem/@fontSize;
            height: 30rem/@fontSize;
            line-height: 30rem/@fontSize;
            float: left;
            border-bottom: 1px solid #e2e2e2;
            .sureBtn{
                width: 30rem/@fontSize;
                height: 30rem/@fontSize;
                float: right;
                font-size: 20rem/@fontSize;
                background-image: url("../img/preservation@3x.png");
                background-position: center center;
                background-size: 30rem/@fontSize auto;
                background-repeat: no-repeat;
            }
        }
    }
    .material_list{
        width: 375rem/@fontSize;
        height: 125em/@fontSize;
        float: left;
        padding: 5rem/@fontSize;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        ul{
            width: 100%;
            float: left;
            height: 120rem/@fontSize;
            li{
                width: 56rem/@fontSize;
                height: 56rem/@fontSize;
                float: left;
                margin: 0 5rem/@fontSize 5rem/@fontSize 0;
                background-color: #E2E2E2;
                text-align: center;
                display: table;
                span{
                    width: auto;
                    height: auto;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    img{
                        width: auto;
                        height: auto;
                        max-width: 45rem/@fontSize;
                        max-height: 45rem/@fontSize;
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
    .material_tab{
        width: 375rem/@fontSize;
        height: 44rem/@fontSize;
        line-height: 44rem/@fontSize;
        float: left;
        text-align: center;
        font-size: 14rem/@fontSize;
        color: #666;
    }
}